<template>
  <div class="chart-wrapper">
    <Echart
      :options="option"
      id="chart-renkoufenlei"
    ></Echart>
    <!-- <dv-charts :option="option" /> -->
  </div>
</template>

<script>
import _charts from '@/utils/chartConfig'
import { chartMixin } from '@/mixin'
export default {
  mixins: [chartMixin],
  mounted() {},
  methods: {
    resetOption(val) {
      const optionsColor = _charts.color(true)
      this.option = {
        xAxis: [{
          ..._charts.xAxis(val),
        }],
        yAxis: { min: 0, max: 100, show: false },
        textStyle: {
          color: '#fff',
          fontSize: _charts.fontSize,
        },
        series: [
          {
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [60, 10],
            'symbolOffset': [0, -5],
            'symbolPosition': 'end',
            'z': 12,
            'label': {
              'normal': {
                fontSize: _charts.fontSize,
                'show': true,
                'position': 'top',
                'formatter': '{c}%'
              }
            },
            'data': [{
              'value': val.seriesData[0],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(0,151,237,1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(74,196,254,1)'
                    }]
                  }
                }
              }
            }, {
              'value': val.seriesData[1],
              'itemStyle': {
                'color': {
                  'x': 0,
                  'y': 0,
                  'x2': 0,
                  'y2': 1,
                  'type': 'linear',
                  'global': false,
                  'colorStops': [{
                    'offset': 0,
                    'color': 'rgba(0,159,101,1)'
                  }, {
                    'offset': 1,
                    'color': 'rgba(83,255,193,1)'
                  }]
                }
              }
            }, {
              'value': val.seriesData[2],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(19,84,222,1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(91,165,244,1)'
                    }]
                  }
                }
              }
            }]
          }, {
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [60, 10],
            'symbolOffset': [0, 5],
            'z': 12,
            'data': [{
              'value': val.seriesData[1],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(98,199,255,1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(20,159,236,1)'
                    }]
                  }
                }
              }
            }, {
              'value': val.seriesData[1],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(0,180,115,1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(82,224,185,1)'
                    }]
                  }
                }
              }
            }, {
              'value': val.seriesData[2],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(15,67,186,1)'
                    }, {
                      'offset': 1,
                      'color': 'rgba(43,130,243,1)'
                    }]
                  }
                }
              }
            }]
          }, {
            'type': 'bar',
            'itemStyle': {},
            ..._charts.bar(val),
            'data': [{
              'value': val.seriesData[0],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(113,204,255,1)'
                    }, {
                      'offset': 1,
                      'color': '#09a4f9'
                    }]
                  }
                }
              }
            }, {
              'value': val.seriesData[1],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(17,228,151,1)'
                    }, {
                      'offset': 1,
                      'color': '#00af85'
                    }]
                  }
                }
              }
            }, {
              'value': val.seriesData[2],
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': 'rgba(56,155,334,1)'
                    }, {
                      'offset': 1,
                      'color': '#0636a3'
                    }]
                  }
                }
              }
            }]
          }
        ]
      }
      console.log('人口分类', this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
